<template>
    <div class="banner-table-container">
        <el-button size="mini" type="primary" @click="handleAdd()">
            新增
        </el-button>
        <el-table ref="tableRef" :data="result.banners" tooltip-effect="dark"
            style="width: 100%; max-width: 1000px; margin: 0 auto;" border highlight-current-row>
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="ID" sortable>
                <template #default="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="名称">
                <template #default="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column label="图片" width="60">
                <template #default="scope"><img :src="scope.row.icon" alt="" width="40" height="40"></template>
            </el-table-column>
            <el-table-column label="是否启用">
                <template #default="scope">
                    <span v-if="scope.row.status === 1">启用</span>
                    <span v-else-if="scope.row.status === 0">未启用</span>
                    <span v-else>未知</span>
                </template>

            </el-table-column>
            <el-table-column label="操作" width="280">
                <template #default="scope">
                    <div class="flex justify-center space-x-1">
                        <el-button type="primary" class="btn-edit smaller-btn"
                            @click="handleEdit(scope.$index, scope.row)">
                            <i class="el-icon-edit"></i> <span class="btn-text">编辑</span>
                        </el-button>
                        <el-button type="danger" class="btn-delete smaller-btn"
                            @click="handleDelete(scope.$index, scope.row)">
                            <i class="el-icon-delete"></i> <span class="btn-text">删除</span>
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <div class="pagination-container mt-4 flex justify-between items-center">
            <div class="text-sm text-gray-500">
                共 {{ result.totalSize }} 条记录
            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.pageNo" :page-sizes="[5, 10, 20, 50]" :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="result.totalSize">
            </el-pagination>
        </div>
        <BannerAddEdit ref="bannerAddEdit" :addVisible="addVisible" :title="title" @closeDialog="closeDialog">
        </BannerAddEdit>
        <BannerInfo ref="bannerInfo" :infoVisible="infoVisible" @closeDialog="closeDialog"></BannerInfo>
    </div>
</template>

<script>
import { bannerPageApi, delBannerApi } from '@/api/BannerApi.js';
import BannerAddEdit from '@/components/banner/BannerAddEdit.vue';
import BannerInfo from '@/components/banner/BannerInfo.vue';

export default {
    data() {
        return {
            page: {
                pageNo: 1,
                pageSize: 5
            },
            result: {
                banners: [],
                totalPage: 1,
                totalSize: 0
            },
            addVisible: false,
            infoVisible: false,
            title: ''
        }
    },
    components: {
        BannerAddEdit,
        BannerInfo
    },
    mounted() {
        this.loadBanners();
    },
    methods: {
        async loadBanners() {
            try {
                const res = await bannerPageApi(this.page);
                console.log(res)
                if (res.status === 200) {
                    this.result.banners = res.data.records;
                    this.result.totalPage = res.data.pages;
                    this.result.totalSize = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
            } catch (error) {
                console.error('获取 Banner 列表失败:', error);
                this.$message.error('网络错误，请稍后重试');
            }
        },

        // 分页相关方法
        handleSizeChange(newSize) {
            this.page.pageSize = newSize;
            this.loadBanners();
        },

        handleCurrentChange(newPage) {
            this.page.pageNo = newPage;
            this.loadBanners();
        },

        // 操作方法
        closeDialog(isReflush = false) {
            this.addVisible = false;
            this.infoVisible = false;
            isReflush && this.loadBanners();
        },
        handleAdd() {
            this.addVisible = true;
            this.title = '新增 Banner';
            this.$refs.bannerAddEdit.openDialog();
        },
        handleEdit(index, row) {
            console.log('编辑 Banner:', row);
            this.addVisible = true;
            this.title = '编辑 Banner';
            this.$refs.bannerAddEdit.openDialog(row.id);
        },
        handleInfo(index, row) {
            this.infoVisible = true;
            this.$refs.bannerInfo.openDialog(row.id);
        },
        handleDelete(index, row) {
            this.$confirm('确定要删除此 Banner 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    const res = await delBannerApi(row.id);
                    if (res.status === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message.error(res.msg);
                    }
                } catch (error) {
                    console.error('删除 Banner 失败:', error);
                    this.$message.error('网络错误，请稍后重试');
                }
                this.loadBanners(); // 刷新数据
            }).catch(() => {
                // 取消操作
            });
        },
        handleUploadSuccess(response, file, fileList) {
            this.$message({
                type: 'success',
                message: '上传成功!'
            });
            this.loadBanners(); // 刷新数据
        },
        handleUploadError(error, file, fileList) {
            console.error('上传失败:', error);
            this.$message.error('上传失败，请稍后重试');
        },
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isPNG) {
                this.$message.error('上传图片只能是 JPG/PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG || isPNG && isLt2M;
        }
    }
}
</script>

<style scoped lang="less">
.banner-table-container {
    // 表格容器样式

    .pagination-container {
        // 分页容器样式
        padding: 10px;
        background-color: #f5f7fa;
        border-radius: 0 0 4px 4px;
    }

    // 优化表格样式
    .el-table {
        &__header th {
            background-color: #f5f7fa;
            color: #606266;
            font-weight: 600;
        }

        &__row {
            transition: all 0.2s ease;

            &:hover {
                background-color: #fafbfc !important;
            }
        }

        // 隐藏水平滚动条
        &__body-wrapper {
            overflow-x: hidden;
        }
    }

    // 按钮样式优化
    .btn-edit {
        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }
    }

    .btn-info {
        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }
    }

    .btn-delete {
        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }
    }

    // 按钮组样式
    .flex {
        display: flex;
    }

    .justify-center {
        justify-content: center;
    }

    .space-x-1 {
        gap: 4px;
    }

    // 新增按钮变小样式
    .smaller-btn {
        padding: 2px 4px;
        font-size: 10px;
    }
}
</style>